<template>

  <header class="header">
    <symbol id="icon-cart" viewBox="0 0 38 32">
      <title>cart</title>
    </symbol>
    <div class="navbar">
      <div class="navbar-left-container">
        <a href="/">
          <img class="navbar-brand-logo" src="static/logo.png"></a>
      </div>
      <div class="navbar-right-container" style="display: flex;">
        <div class="navbar-menu-container">
          <!--<a href="/" class="navbar-link">我的账户</a>-->
          <span class="navbar-link" v-text="userNickName" v-if="userId"></span>
          <a href="javascript:void(0)" class="navbar-link" @click="loginFlag=true" v-if="!userId">Login</a>
          <a href="javascript:void(0)" class="navbar-link" v-else @click="logOut">Logout</a>
          <div class="navbar-cart-container">
            <a class="navbar-link navbar-cart-link" href="/#/cart" v-if="userId">
              购物车-- <span class="cartList" v-text="$store.state.cartCount" v-if=""></span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="md-modal modal-msg md-modal-transition" :class="{'md-show':loginFlag}">
      <div class="md-modal-inner">
        <div class="md-top">
          <div class="md-title">登录
          </div>
          <button class="md-close" @click="loginFlag=false">关</button>
        </div>
        <div class="md-content">
          <div class="confirm-tips">
            <div class="error-wrap"><span class="error error-show" v-show="errorTip">用户名或密码错误</span></div>
            <ul>
              <li class="regi_form_input"><i class="icon IconPeople"></i> <input type="text" tabindex="1" v-text="userName"
                                                                                 v-model="userName" name="loginname"
                                                                                 placeholder="User Name"
                                                                                 data-type="loginname"
                                                                                 class="regi_login_input regi_login_input_left">
              </li>
              <li class="regi_form_input noMargin"><i class="icon IconPwd"></i> <input type="password" tabindex="2" v-text="password"
                                                                                       v-model="password"
                                                                                       name="password"
                                                                                       placeholder="Password"
                                                                                       class="regi_login_input regi_login_input_left login-input-no input_text" @keyup.enter="login">
              </li>
            </ul>
          </div>
          <div class="login-wrap"><a href="javascript:;" class="btn-login" @click="login">登录</a></div>
        </div>
      </div>
    </div>
    <div class="" :class="{'md-overlay':loginFlag}" @click="loginFlag=false"></div>

  </header>

</template>

<script>
  import '../assets/css/login.css';
  import Cookies from 'js-cookie';

  export default {
    name: "Header",
    data() {
      return {
        userName: 'admin',     //用户名表单
        password: '123456',     //用户密码表单
        errorTip: false,  //错误信息提示
        loginFlag: false, //登录框
        loginDiv: true,   //
        userId: '',       //登录的用户id
        userNickName: '', //登录的用户昵称
      }
    },
    //获取登录用户信息
    mounted() {
      this.userId = Cookies.get('userId');
      this.userNickName = Cookies.get('userName');
      //获取购物车数量
      this.getCartCount();
    },
    methods: {
      //登录
      login() {
        if (!this.userName || !this.password) {
          this.errorTip = true;
          return;
        }
        this.$http.post('/user/login', {
          params: {
            userName: this.userName,
            password: this.password,
          }
        }).then(response => {
          let res = response.data;
          if (res.status == '0') {
            this.errorTip = false;
            this.loginFlag = false;
            this.loginDiv = false;
            this.userId = Cookies.get('userId');
            this.userNickName = Cookies.get('userName');
            this.getCartCount();
          }else{
            this.errorTip = true;   //账号或密码错误
          }
        });
      },
      //退出
      logOut() {
        this.$http.post('/user/logOut',{}).then(response=>{
          let res = response.data;
          if (res.status == '0'){
            this.userId = Cookies.get('userId');
            this.$router.push({ path : '/' });
          }
        });
      },
      //全栈获取用户购物车数量
      getCartCount(){
        this.$http.get('user/cartCount').then(response=>{
          let res = response.data;
          if (res.status === 0){
            this.$store.commit('iniCartCount',res.result);
          }
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .navbar {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .cartList{
      color: #d1434a;
    }
    .navbar-menu-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 200px;
      .navbar-cart-logo {
        width: 50px;
        height: 30px;
      }
    }
  }
</style>
